<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2022-01-15 18:49:07
-->
<template>
    <navTitle title="推荐歌单" />
    <div class="songList">
        <div class="relative overflow-hidden item daily">
            <div class="tip">
                <p>根据您的音乐口味生成</p>
                <p>每日更新</p>
            </div>
            <div class="relative cursor-pointer cover flex-c-c" @click="toDailySong">
                <img src="@/assets/imgs/calendar_bg.png" class="absolute top-0 w-full" />
                <div class="absolute top-0 w-full h-full text-white flex-c-c">
                    <svgIcon name="calendar" size="80" />
                    <span
                        class="absolute text-lg font-bold transform translate-y-2"
                        style="font-size: 35px;"
                    >{{ today }}</span>
                </div>
            </div>
            <span class="mt-1 name text-sub-text-color">每日歌曲推荐</span>
        </div>
        <div class="item" v-for="item in songList">
            <div class="cover" @click="toDetail(item.id)">
                <!-- <img :src="item.picUrl" class="absolute top-0 w-full" /> -->
                <img v-lazy="item.picUrl" class="absolute top-0 w-full" />
                <div class="playCount">
                    <svgIcon name="play-empty-icon" size="13" style="margin-right: 2px;" />
                    {{ numberAddUnit(item.playCount) }}
                </div>
                <div class="play flex-c-c trans text-theme-color" @click.stop="play(item.id)">
                    <svgIcon name="play-icon" size="24" style="transform: translateX(2px);" />
                </div>
            </div>
            <span class="mt-1 name text-sub-text-color">{{ item.name }}</span>
        </div>
    </div>
</template>

<script lang='ts' setup>
import navTitle from './navTitle.vue'
import { useRouter } from 'vue-router'
import { getDailyRecommendList } from '@/service/api/songList/songList'
import { onMounted, ref } from 'vue'
import { ISongList } from '@/service/api/songList/types'
import { numberAddUnit } from '@/utils/util'
import { usePlay } from '@/hooks/play/usePlay'

const router = useRouter()
const { playSongList } = usePlay()

// 今天日期
const today = new Date().getDate()

// 歌单列表
const songList = ref<ISongList[]>([])

onMounted(async () => {
    // 获取歌单
    const { result } = await getDailyRecommendList()
    songList.value = result
})

// 跳转今日推荐
const toDailySong = () => {
    router.push('dailySongs')
}
// 跳转歌单详情
const toDetail = (id: number) => {
    router.push({
        path: '/songListDetail',
        query: { id }
    })
}

// 播放歌单
const play = (id: number) => {
    playSongList(id)
}
</script>

<style scoped lang='scss'>
@import "../../../assets/css/common.scss";

.daily {
    &:hover {
        .tip {
            transform: translate(0);
        }
    }
    .tip {
        @apply absolute w-full h-12 flex flex-col justify-center px-2 
        bg-black bg-opacity-20 transition duration-300 delay-500 text-white text-12
        transform -translate-y-12 whitespace-nowrap z-10;
    }
}
.songList {
    @apply w-full flex flex-wrap max-w-5xl;
    .item {
        $size: calc(20% - 15px);
        width: $size;
        min-width: $size;
        margin: 0 15px 15px 0;

        .cover {
            @apply relative w-full h-0 rounded cursor-pointer overflow-hidden;
            padding-top: 100%;
            &:hover {
                .play {
                    opacity: 0.9;
                }
            }
            .playCount {
                @apply absolute w-full flex items-center justify-end h-6 top-0 left-0 pr-1 text-white text-13 rounded-t z-10;
                background: linear-gradient(
                    to bottom,
                    rgba(0, 0, 0, 0.2),
                    rgba(0, 0, 0, 0)
                );
            }
            .play {
                @apply absolute right-3 bottom-3 w-8 h-8 bg-white rounded-full opacity-0 z-10 duration-700;
            }
        }
        .name {
            @include text-overflow(2);
        }
    }
}
</style>